<template>
  <div class="data-manage w h box-b">
    <div class="box-b h el-card p10">
      <div class="header f-b a-i-c">
        <div class="category-title f-s a-i-c">
          <el-button v-if="projectId" type="text" icon="arrow-left" class="m-r10"
            @click="goProjectManage()">返回</el-button>
          <span class="m-r10">
            数据集管理
          </span>
          <el-button type="primary" icon="plus" @click="editDataCollection()">增加</el-button>
        </div>
        <div class="f-e">
          <el-select v-model="dataTypeSelect">
            <el-option v-for="(item, i) in dataTypeList" :key="i" v-bind="item"></el-option>
          </el-select>
          <div class="w-260">
            <el-input class="w" v-model="dataCollectionName" placeholder="项目名称"
              clearable></el-input>
          </div>
          <el-button type="primary" class="m-l4" icon="search"
            @click="searchDataList">查询</el-button>
        </div>
      </div>
      <div v-loading="loadingData" class="data-list over-a-y" style="height:calc(100% - 70px)">
        <div class="data-li m-b10" v-for="(collection, l) in imageCollection" :key="l">
          <div class="li-title f-b a-i-c">
            <div class="f-s a-i-c">
              <span>
                {{ collection.projectName }}
              </span>
              <!-- <el-icon-render class="el-icon-edit m-r6 m-l6"></el-icon-render> -->
              <!-- <span class="m-l10">
                <span class="c8"> 数据集ID:</span> {{ collection.photo.id }}
              </span>
              <span class="m-l10">
                <span class="c8"> 时间:</span> {{ collection.photo.createTime }}
              </span> -->
            </div>
            <div class="f-e a-i-c">
              <el-icon-render class="el-icon-DocumentAdd m-r6"></el-icon-render>
              <span class="cur-p">新增版本</span>
              <el-icon-render class="el-icon-delete m-r6 m-l10"></el-icon-render>
              <span class="cur-p"
                @click="deleteImageCollection(collection.image[0].photo.id)">删除</span>
            </div>
          </div>
          <div class="li-box customer-table">
            <div class="el-table">
              <div class="el-table__header">
                <div class="thead">
                  <div class="tr">
                    <th v-for="(column, c) in dataCollectionLayout" :key="c"
                      :style="[{ width: column.width || 'auto' }, column.style || {}]"
                      :class="[column?.class]" class="is-leaf el-table__cell">
                      {{ column.label }}
                    </th>
                  </div>
                </div>
              </div>
              <div class="el-table__body-wrapper" style="height:calc(100% - 30px)">
                <div class="tbody w h" v-if="collection.image && collection.image.length > 0">
                  <div class="el-table__row" tr v-for="(li, l) in collection.image">
                    <div v-for="(column, c) in dataCollectionLayout" :key="c"
                      :style="[{ width: column.width || 'auto' }, column.style || {}]"
                      :class="[column?.class]" class="el-table__cell">
                      <template v-if="column.prop != 'edit'">
                        <span v-html="getRenderTableValue(column, li)"></span>
                      </template>
                      <template v-else>
                        <el-button v-if="li.num == undefined && li.finish == undefined" type="text"
                          class="m-r2" @click="importCollection(li)">导入</el-button>
                        <el-button v-else type="text" class="m-r2"
                          @click="taggingTask(li)">查看</el-button>
                        <!-- <el-button type="text" class="m-r2">多人标注</el-button> -->
                        <el-button type="text" class="m-r2" @click="moreTask(li)">创建多人任务</el-button>
                      </template>
                    </div>
                  </div>
                </div>
                <div v-if="![collection] || [collection].length <= 0" class="w h a-i-c f-c ">
                  <el-empty :image-size="80" description="没有找到相关信息" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="m-t10 w" v-if="!imageCollection || imageCollection.length <= 0">
          <el-empty description="没有找到相关数据！"></el-empty>
        </div>
      </div>
      <div class="w f-e m-t5">
        <el-pagination small background :current-page="current" :page-size="size"
          layout="prev, pager, next" @size-change="pageSizeHandler"
          @current-change="pageCurrentHandler" :total="total" class="mt-4" />
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import elIconRender from '@/components/render/el-icon-render'
import frameProperty from '@/mixins/frame-property'
import { Collection } from '@/apis/collection'
import { type RequestCode } from '@/server/base'

export default {
  name: 'DataManage',
  mixins: [frameProperty],
  components: { elIconRender },
  data() {
    return {
      dataCollectionName: '',
      loadingData: false,

      dataTypeSelect: '' as '' | '1' | '2' | '3',
      dataTypeList: [
        { label: '全部', value: '' },
        { label: '图形识别', value: '3' },
        { label: '图像分类', value: '1' },
        { label: '图像分隔', value: '2' }
      ],

      dataCollectionLayout: [
        {
          prop: 'version',
          label: '版本',
          width: '140px',
          format(val: string) {
            return val || ''
          }
        },
        {
          prop: 'name',
          label: '数据集名称',
          width: '140px',
          format(val: string, row: any) {
            return row?.photo?.name || ''
          }
        },
        {
          prop: 'photo',
          label: '数据集ID',
          width: '140px',
          format(val: any, row: any) {
            return row?.photo?.id
          }
        },
        {
          prop: 'num',
          label: '数据量',
          width: '140px'
        },
        // {
        //   prop: 'recentlyImported',
        //   label: '最近导入状态',
        //   width: '140px'
        //   // format(val: string | number, row: any) {
        //   //   return `<div class="f-s a-i-c"><div class="${
        //   //     val == 1 ? 'b-s' : 'b-d'
        //   //   } w-10 h-10 r">&nbsp;&nbsp;</div>${val == 1 ? '已完成' : '未完成'}</div> `
        //   // }
        // },
        {
          prop: 'type',
          label: '标注类型',
          width: '140px',
          format(val: any, row: any) {
            return ['', '图像分类', '图像分隔', '图形识别'][+row?.photo?.type]
          }
        },
        {
          prop: 'annotationTeam',
          label: '标注团队',
          width: '140px'
          // format(val: any, row: any) {
          //   return ['', '图像检测', '图像分类', '图像分割'][+row?.photo?.type]
          // }
        },
        {
          prop: 'finish',
          label: '标注状态',
          width: '140px',
          format(val: any, row: any) {
            return val == undefined
              ? ''
              : // : `${val == 0 || row.num == 0 ? '0' : (val / row.num).toFixed(2)}% (${val} / ${row.num})`
                `${
                  val == 0 || row.num == 0 ? '0' : parseInt((val / row.num) * 100 + '')
                }% (${val} / ${row.num})`
          }
        },
        // {
        //   prop: 'finish',
        //   label: '标注状态',
        //   width: '140px',
        //   format(val: string | number, row: any) {
        //     const flag = val
        //     return `<div class="f-s a-i-c"><div class="${
        //       flag == 1 ? 'b-s' : 'b-d'
        //     } w-10 h-10 r">&nbsp;&nbsp;</div>${flag == 1 ? '已完成' : '未完成'}</div> `
        //   }
        // },
        {
          prop: 'reviewTeam',
          label: '检查团队',
          width: '140px'
        },
        {
          prop: 'reviewState',
          label: '检查状态',
          width: '140px',
          format(val: string | number, row: any) {
            if (val == undefined) {
              return ''
            }
            const flag = val == '已完成' ? 1 : 0
            return `<div class="f-s a-i-c"><div class="${
              flag == 1 ? 'b-s' : 'b-d'
            } w-10 h-10 r">&nbsp;&nbsp;</div>${flag == 1 ? '已完成' : '未完成'}</div> `
          }
        },
        {
          prop: 'clearTeam',
          label: '清洗团队',
          width: '140px'
        },
        {
          prop: 'clearState',
          label: '清洗状态',
          width: '140px',
          format(val: string | number, row: any) {
            if (val == undefined) {
              return ''
            }
            const flag = val == '已完成' ? 1 : 0
            return `<div class="f-s a-i-c"><div class="${
              flag == 1 ? 'b-s' : 'b-d'
            } w-10 h-10 r">&nbsp;&nbsp;</div>${flag == 1 ? '已完成' : '未完成'}</div> `
          }
        },

        { prop: 'edit', label: '操作', class: 'f-g1', style: 'min-width:280px' }
      ],

      current: 1,
      size: 20,
      total: 1,

      imageCollection: [] as any[]
    }
  },
  computed: {
    projectId(): any {
      return this.$route.params?.projectId || ''
    }
  },
  methods: {
<<<<<<< HEAD

=======
>>>>>>> 7088b7fdc6d03c67559950af9d15d1dc54fb6781
    // sceachDataList(){

    //         Collection.imageCollection(this.dataCollectionName, this.dataTypeSelect)

    //     .then((res: RequestCode) => {
    //       if(this.dataCollectionName.length!=0){
    //         console.log(res.data)
    //     this.imageCollection= res.data.filter((item:any)=>{
<<<<<<< HEAD
    //         return item.image[0].photo.name.indexOf(this.dataCollectionName) !== -1 
=======
    //         return item.image[0].photo.name.indexOf(this.dataCollectionName) !== -1
>>>>>>> 7088b7fdc6d03c67559950af9d15d1dc54fb6781
    //   })
    //   console.log(this.imageCollection)
    //   }else{
    //       this.imageCollection = res.data
    //   }
    //       // this.imageCollection = res.data

    //     })
   

  
    // },
      goProjectManage(){
      this.$router.push({
        name:'projectManage'
      })},
    searchDataList() {
      console.log(this.dataCollectionName, this.dataTypeSelect, this.projectId)
      Collection.imageCollection(
        // '',
        this.dataCollectionName,
        this.dataTypeSelect,
        this.dataTypeSelect == '' ? '' : this.projectId
      ).then((res: RequestCode) => {
        // if (this.dataCollectionName.length != 0) {
        //   this.imageCollection = res.data.filter((item: any) => {
        //     return item.image[0].photo.name.indexOf(this.dataCollectionName) !== -1
        //   })
        //   console.log(this.imageCollection)
        // } else {
        this.imageCollection = res.data
        // }
      })
    },
    deleteImageCollection(id: number) {
      Collection.deleteImageCollection(id).then((res: RequestCode) => {
        ;(this as any).$message.success('删除成功')
        this.getDataList()
      })
    },
    getImageCollection() {
      this.loadingData = true
      Collection.imageCollection(this.dataCollectionName, this.dataTypeSelect)
        .then((res: RequestCode) => {
          this.loadingData = false
          this.imageCollection = res.data
        })
        .catch(() => {
          this.loadingData = false
        })
    },
    editDataCollection(row?: any) {
      const isEdit = !row || !row.id ? this.urlPathCode.FALSE : this.urlPathCode.FALSE
      this.dialogPagePush({
        name: 'createdCollection',
        params: { isEdit: row && row.id, projectId: this.projectId }
      })
      //   this.$router.push({
      //     name: 'modifyCollection',
      //     params: {
      //       isEdit,
      //       value: this.getParamsString(row)
      //     }
      //   })
    },
    moreTask(row: { photo: any }) {
      this.dialogPagePush({
        name: 'myTaskEdit',
        params: { projectId: row.photo.id, projectName: row.photo.name, type: 'one' }
      })
    },
    taggingTask(row: { photo: any }) {
      this.$router.push({ name: 'taggingManage', params: { projectId: row.photo.id } })
    },
    getDataList() {
      this.getImageCollection()
    },
    pageSizeHandler(value: number) {
      this.size = value
      this.current = 1
      this.getDataList()
    },
    pageCurrentHandler(value: number) {
      this.current = value
      this.getDataList()
    },

    getRenderTableValue(layout: any, row: any) {
      const { prop, format } = layout

      if (typeof format === 'undefined' && !row[prop] && row[prop] != 0) {
        return ''
      }
      if (typeof format === 'function') {
        return format(row[prop], row)
      }
      return row[prop]
    },
    importCollection(row: any) {
      this.$router.push({
        name: 'importCollection',
        params: {
          isEdit: this.urlPathCode.FALSE,
          value: this.getParamsString(row)
        }
      })
    }
  },
  created() {
    if (this.projectId) {
      this.searchDataList()
    } else {
      this.getDataList()
    }
  }
}
</script>
<style lang="scss" scoped>
.data-manage {
  .data-li {
    border: 1px solid #e9e9e9;
    overflow: hidden;
    border-radius: 4px;
  }

  .li-title {
    background: var(--head-background);
    box-sizing: border-box;
    padding: 8px;
  }
}
</style>